<template>
<!-- 专辑详情页面 -->
  <view>
    <view class="head_img">
      <image :src="albumInfo.lcover" mode="widthFix">
        <view class="head_info">
          <view class="head_title">{{ albumInfo.name }}</view>
          <view class="head_text">关注专辑</view>
        </view>
      </image>
    </view>
    <!-- 专辑作者 -->
    <view class="author_box">
      <view class="author_head">
        <image
          class="author_img"
          :src="albumInfo.user.avatar"
          mode="widthFix"
        ></image>
        <view class="author_info">{{ albumInfo.user.name }}</view>
      </view>
      <!-- 此处文字有换行符。用text显示 -->
      <view class="author_list"
        ><text>{{ albumInfo.desc }}</text></view
      >
    </view>
    <!-- 专辑作者end -->
    <!-- 图片详情 -->
    <view class="album_list_box">
      <view class="album_item" v-for="(item,index) in albumList" :key="item.id">
        <nav-go :list="albumList" :index="index">
        <image :src="item.thumb + item.rule.replace('$<Height>','360')" mode="aspectFill"></image>
        </nav-go>
      </view>
    </view>
    <!-- 详情结束 -->
    <!--  -->
  </view>
</template>
<script>
import navGo from "../../components/navgo";
export default {
  components:{
    navGo
  },
  data() {
    return {
      params: {
        limit: 30,
        order: "new",
        skip: 0,
        /* 值为0时 返回值中没有专辑Info信息 */
        first: 1
      },
      albumInfo: {},
      albumList: [],
      ifGetList:true
    };
  },
  onLoad(a) {
   //a.id = "5177907348d5b96b2eacbae0";
   //console.log(a.id);
    //a.id = "5e26a5d3e7bce7393fd169fb"
    this.getList(a.id);
  },
   /* 页面上拉滑动触底事件 */
  onReachBottom(){
      if(this.ifGetList){
        this.params.first = 0;
         // console.log(this.params.first);
          this.params.skip += this.params.limit
        this.getList()
      }else{
          uni.showToast({
              title:"没有更多数据了",
              icon:"none"
          })
      }
  
      
  },
  methods: {
    async getList(id) {
      const res = await this.http({
        url: `http://157.122.54.189:9088/image/v1/wallpaper/album/${id}/wallpaper`,
        data: this.params
      });
      //  console.log(res);
      if (res.statusCode !== 200) {
        return;
      }
     
      if (this.params.first === 1) {
          this.albumInfo = res.data.res.album;
         
      }
      if(res.data.res.wallpaper.length === 0){
          this.ifGetList =false
          return
      }
       
        //  console.log(this.params.first);
      
      // console.log(this.albumInfo);
      // console.log(res.data.res);
       
      this.albumList =[...this.albumList ,...res.data.res.wallpaper]
          
      // console.log(this.albumList);
      // console.log(JSON.stringify(res.data.res.album.desc));
        
    }
  }
 

};
</script>
<style lang="scss" scoped>
.head_img { 
  width: 100%;
  position: relative;
  color: #ccc;
  .head_info {
    position: absolute;
    width: 100%;
    bottom: 20rpx;
    left: 20rpx;
    display: flex;
    justify-content: space-between;
    overflow: hidden;

    .head_title {
      font-size: 36rpx;
      font-weight: 700;
      color: rgba(247, 243, 243, 0.3);
    }

    .head_text {
      margin-right: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 20rpx;
      background-color: $color;
      border-radius: 10rpx;
    }
  }
}
.author_box {
  padding: 20rpx;
  .author_head {
    display: flex;
    .author_img {
      width: 60rpx;
    }
    .author_info {
      margin: 10rpx 0 0 20rpx;
      font-weight: 700;
      color: #000;
    }
  }

  .author_list {
    margin: 10rpx;
  }
}
.album_list_box {
    display: flex;
    flex-wrap: wrap;
  .album_item {
     width: 33.3%;
     border: 3rpx solid #fff;
      image {
        height: 160rpx;
      }
  }
}
</style>